import { useRouteMatch } from 'umi';
import { connect } from 'dva';
import { browserHistory } from 'react-router';
import { PageHeader, Form, Input, InputNumber, Button } from 'antd';

const layout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 8 },
};
const tailLayout = {
  wrapperCol: { offset: 4, span: 8 },
};

function Employee({ employees, dispatch, history }) {
  const {
    params: { key },
  } = useRouteMatch();
  const employee = employees.find((e) => e.key === key);
  function onFinish(values) {
    dispatch({
      type: 'employees/update',
      payload: {
        employee: {
          ...employee,
          ...values,
        },
      },
    });
    history.push('/employee/list');
  }

  return (
    <div>
      <PageHeader
        title={
          'Employee ' +
          employee.firstName +
          '·' +
          employee.lastName +
          " 's Page"
        }
        onBack={() => window.history.back()}
      />
      <Form
        {...layout}
        name="employee"
        initialValues={employee}
        onFinish={onFinish}
      >
        <Form.Item label="FirstName" name="firstName">
          <Input />
        </Form.Item>
        <Form.Item label="LastName" name="lastName">
          <Input />
        </Form.Item>
        <Form.Item label="Age" name="age">
          <InputNumber />
        </Form.Item>
        <Form.Item label="Address" name="address">
          <Input />
        </Form.Item>
        <Form.Item {...tailLayout}>
          <Button type="primary" htmlType="submit">
            Submit
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
}

export default connect(({ employees }) => ({ employees }))(Employee);
